<template>
	<view class="inputCode">
		<navBar title="绑定银行卡" isBack color="#fff" backColor="#fff" background="#333"></navBar>
		<view class="toSend">
			<h3>输入验证码</h3>
			<p>验证码已发送至<span>（+81）{{mobile}}</span></p>
			<view class="inputBox">
				<u-message-input active-color="#E5B35E" mode="bottomLine" @finish="inputFinish"></u-message-input>
				<p><button @click="more" class="moreBtn" type="default" :disabled="openTime">重新获取</button><span v-if="openTime">（{{timeNum}}s）</span></p>
			</view>
		</view>
		<view class="btn">
			<button type="default" @click="toSubmit">确认</button>
		</view>
	</view>
</template>

<script>
	import navBar from '@/components/navBar/navBar.vue'
	import service_distri from '@/service/distri.js'
	export default{
		data(){
			return{
				mobile:'',
				timeNum:60,
				openTime:true,
				timer:null,
				code:'',
				card_id:null
			}
		},
		onLoad(options) {
			this.mobile = options.mobile
			this.card_id = options.card_id
			this.countDown()
		},
		onUnload(){
			clearInterval(this.timer)
			this.timer = null
		},
		methods:{
			// 输入完成
			inputFinish(e){
				console.log(e)
				this.code=e
			},
			
			more(){
				this.openTime=true
				this.timeNum = 60
				this.countDown()
				service_distri.getSmsAgen({mobile:this.mobile}).then(res=>{
					if(res.code==1){
						uni.showToast({
							title:'已重新发送',
							icon:'success'
						})
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			},
			// 倒计时
			countDown(){
				let that = this
				this.timer = setInterval(function(){
					that.timeNum--
					// console.log('11')
					if(that.timeNum<1){
						that.openTime = false
						clearInterval(that.timer)
						that.timer = null
					}
				},1000)
				
			},
			
			// 确认按钮
			toSubmit(){
				if(this.code==''){
					uni.showToast({
						title:'请输入验证码',
						icon:'none'
					})
					return
				}
				let params = {
					sms_code:this.code,
					card_id:this.card_id
				}
				service_distri.toUpSmsCodw(params).then(res=>{
					console.log(res,'验证码结果')
					if(res.code==1){
						uni.redirectTo({
							url:'result'
						})
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.inputCode{
		.toSend{
			padding: 60rpx;
			h3{font: 500 48rpx/66rpx PingFang SC;color: #333333;}
			p{
				display: flex;
				align-items: center;
				justify-content: flex-end;
				margin-top:16rpx;font: 400 28rpx/40rpx PingFang SC;color: #666666;span{color: #E5B35E;}
				.moreBtn{
					margin: 0;
					outline: none;
				}
			}
			.inputBox{
				margin-top: 80rpx;
				p{text-align: right;margin-top: 20rpx;}
			}
		}
		.btn{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: calc(124rpx+ constant(safe-area-inset-bottom));
			height: calc(124rpx + env(safe-area-inset-bottom));
			padding-bottom: constant(safe-area-inset-bottom);
			padding-bottom: env(safe-area-inset-bottom);
			button{
				margin:20rpx auto;
				width: 664rpx;
				height: 84rpx;
				background-color: #E5B35E;
				border-radius: 8rpx;
				font: 400 34rpx/84rpx PingFang SC;
				color: #fff;
			}
		}
	}
</style>
